<template>
  <div class="user-view">
    <el-table
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :data="tableData"
      style="width: 100%"
      :row-style="rowStyle"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0)"
    >
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="uid" label="UID"></el-table-column>
      <el-table-column prop="cid" label="CID"></el-table-column>
      <el-table-column prop="status" label="维修情况">
        <template slot-scope="scope">
          <el-tag
            :type="getTagType(scope.row.status)"
            :effect="scope.row.status === 2 ? 'dark' : 'plain'"
          >
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 更新维修情况 -->
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="updateStatus(scope.row.id, 0)"
            :disabled="scope.row.status === 0"
            >未维修</el-button
          >
          <el-button
            type="warning"
            size="mini"
            @click="updateStatus(scope.row.id, 1)"
            :disabled="scope.row.status === 1"
            >正在维修</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="updateStatus(scope.row.id, 2)"
            :disabled="scope.row.status === 2"
            >维修完成</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      loading: true,
      repair: {},
      headerCellStyle: {
        background: "#000034",
      },
      cellStyle: {
        background: "#032241",
      },
      rowStyle: {
        background: "#032241",
      },
    };
  },
  computed: {
    tableData() {
      return this.repair.repairs;
    },
  },
  methods: {
    async fetchRepair() {
      try {
        const res = await request({
          url: "/api/admins/clientRepair",
          method: "GET",
        });
        this.loading = false;
        this.repair = res.data;
      } catch (error) {
        this.loading = false;
        this.$message.error("获取维修信息失败");
        console.error(error);
        return false;
      }
    },
    async updateStatus(id, status) {
      try {
        await request({
          url: "/api/admins/clientRepair",
          method: "PATCH",
          data: { id, status: "" + status },
        });
        this.$message.success("维修情况更新成功");

        await this.fetchRepair();
      } catch (error) {
        this.$message.error("更新维修情况失败");
        console.error(error);
      }
    },
    getStatusLabel(status) {
      switch (status) {
        case 0:
          return "未维修";
        case 1:
          return "正在维修";
        case 2:
          return "维修完成";
        default:
          return "未知状态";
      }
    },
    getTagType(status) {
      switch (status) {
        case 0:
          return "info";
        case 1:
          return "warning";
        case 2:
          return "success";
        default:
          return "default";
      }
    },
  },
  async mounted() {
    await this.fetchRepair();
  },
};
</script>
